<template>
  <div class="app-container">
    <el-form :model="queryParams" size="small" :inline="true">
      <el-form-item label="单位名称">
        <el-autocomplete
          class="query-organization-autocomplete"
          style="width: 350px;"
          v-model="queryParams.organizationName"
          :fetch-suggestions="organizationFetchSuggestions"
          placeholder="请输入"
          value-key="organizationName"
          placement="bottom"
          :popper-append-to-body="false"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item label="合同编号">
        <el-input
          style="width: 200px;"
          v-model="queryParams.agreementNumber"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select
          style="width: 150px;"
          v-model="queryParams.state"
          placeholder="请选择"
          :clearable="true"
        >
          <el-option label="暂存" :value="0"></el-option>
          <el-option label="提交" :value="1"></el-option>
          <el-option label="生成任务" :value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label=" " label-width="20px">
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">搜索</el-button>
        <el-button icon="el-icon-refresh" @click="handleReset">重置</el-button>
      </el-form-item>
    </el-form>

    <div class="tableoperation">
			<el-button type="primary" icon="el-icon-plus" @click="handleAddEntrustReceipt">新增委托协议单</el-button>
		</div>

    <el-table v-loading="tableLoading" :data="tableList">
      <el-table-column label="委托单位" align="center" prop="delegationOrganizationName" show-overflow-tooltip min-width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.delegationOrganizationName }}</span>
        </template>
      </el-table-column>
			<el-table-column label="受检单位" align="center" prop="entrustOrganizationName" show-overflow-tooltip min-width="200">
        <template slot-scope="scope">
          <span>{{ scope.row.entrustOrganizationName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务受理编号" align="center" prop="acceptanceNumber" min-width="120">
        <template slot-scope="scope">
          <span>{{ scope.row.acceptanceNumber }}</span>
        </template>
      </el-table-column>
			<el-table-column label="合同签署人" align="center" prop="signatory" min-width="85">
        <template slot-scope="scope">
          <span>{{ scope.row.signatory }}</span>
        </template>
      </el-table-column>
      <el-table-column label="签订时间" align="center" prop="signDate" min-width="100">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.signDate, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态" align="center" prop="state" min-width="80">
        <template slot-scope="scope">
          <span v-if="scope.row.state === 0">暂存</span>
          <span v-if="scope.row.state === 1">提交</span>
          <span v-if="scope.row.state === 2">生成任务</span>
        </template>
      </el-table-column>
      <el-table-column label="委托协议书" align="center" prop="ossId" min-width="85">
        <template slot-scope="scope">
          <el-link type="primary" @click="handleLookEntrustReceipt(scope.row)" v-if="scope.row.ossId">查看</el-link>
        </template>
      </el-table-column>
			<el-table-column label="操作" align="center" prop="" width="200">
        <template slot-scope="{row}">
					<el-link style="margin-left: 0px" type="primary" @click="handleDetailEntrustReceipt(row)">详情</el-link>
					<el-link style="margin-left: 10px" type="primary" :disabled="row.state !== 0" @click="handleEditEntrustReceipt(row)">修改</el-link>
					<el-link style="margin-left: 10px" type="danger" @click="handleDeleteEntrustReceipt(row)">删除</el-link>
					<el-link style="margin-left: 10px" type="primary" @click="handleGeneratorEntrustReceipt(row)">生成委托协议书</el-link>
					<el-link style="margin-left: 10px" type="primary" @click="handleContractEntrustReceipt(row)">生成任务</el-link>
        </template>
      </el-table-column>
		</el-table>

		<pagination
			:page.sync="queryParams.pageNum"
			:limit.sync="queryParams.pageSize"
			:total="tableTotal"
			@pagination="getTableListData"
		></pagination>

    <!-- 新增/修改/详情 委托协议单弹框 -->
    <AddEditEntrustReceiptDialog
      :show.sync="showAddEditEntrustReceiptDialog"
      :operType="operType"
      :row="currRow"
      :organizationList="organizationList"
      @refresh="getTableListData"
    ></AddEditEntrustReceiptDialog>
  </div>
</template>

<script>
  import AddEditEntrustReceiptDialog from './components/AddEditEntrustReceiptDialog.vue'
  import {
    entrustReceiptList,
    entrustReceiptGenerator,
    entrustReceiptDelete,
    entrustReceiptCreateContract
  } from '@/api/entrustReceipt/index'
  import { entrustOrganizationList } from '@/api/person/entrustOrganization'
  import { listByIds } from '@/api/system/oss'

  export default {
    name: 'entrustReceipt',
    components: {
      AddEditEntrustReceiptDialog
    },
    data() {
      return {
        organizationList: [],
        queryParams: {},
        tableLoading: false,
        tableList: [],
        tableTotal: 0,

        showAddEditEntrustReceiptDialog: false,
        currRow: {},
        operType: 'add',
      }
    },
    created() {
      this.initQueryParams()
      this.getEntrustOrganizationList()
      this.getTableListData()
    },
    methods: {
      // 初始化查询参数
      initQueryParams() {
        this.queryParams = {
          pageNum: 1,
          pageSize: 10,
          organizationName: '',
          agreementNumber: '',
          state: ''
        }
      },
      // 获取查询参数
      getQueryParams() {
        const params = JSON.parse(JSON.stringify(this.queryParams))
        return params
      },
      // 获取委托单位列表
      getEntrustOrganizationList() {
        entrustOrganizationList({ pageNum: 1, pageSize: 10000 }).then(res => {
          this.organizationList = res.rows || []
        }).catch(err => {})
      },
      // 单位名称输入建议数据
      organizationFetchSuggestions(queryString, callback) {
        const results = this.organizationList.filter(item => item.organizationName.indexOf(queryString) > -1)
        callback(results.length > 0 ? results : this.organizationList)
      },
      // 获取表格数据
      getTableListData() {
        this.tableLoading = true
        const params = this.getQueryParams()
        entrustReceiptList(params).then(res => {
          this.tableLoading = false
          this.tableList = res.rows || []
        }).catch(err => {
          this.tableLoading = false
        })
      },
      // 点击搜索
      handleSearch() {
        this.queryParams.pageNum = 1
        this.getTableListData()
      },
      // 点击重置
      handleReset() {
        this.initQueryParams()
        this.getTableListData()
      },
      // 点击新增委托协议单
      handleAddEntrustReceipt() {
        this.operType = 'add'
        this.showAddEditEntrustReceiptDialog = true
      },
      // 点击修改委托协议单
      handleEditEntrustReceipt(row) {
        this.operType = 'edit'
        this.currRow = row
        this.showAddEditEntrustReceiptDialog = true
      },
      // 点击生成委托协议书
      handleGeneratorEntrustReceipt(row) {
        entrustReceiptGenerator(row.entrustReceiptId).then(res => {
          this.$message.success(res.msg || '操作成功')
        }).catch(err => {})
      },
      // 点击生成任务
      handleContractEntrustReceipt(row) {
        entrustReceiptCreateContract(row.entrustReceiptId).then(res => {
          this.$message.success('操作成功')
        }).catch(err => {})
      },
      // 点击删除委托协议单
      handleDeleteEntrustReceipt(row) {
        const entrustReceiptId = row.entrustReceiptId
        this.$modal.confirm('是否确认删除该委托协议单?').then(() => {
          return entrustReceiptDelete(entrustReceiptId)
        }).then(() => {
          this.getTableListData()
          this.$modal.msgSuccess('删除成功')
        }).catch(err => {})
      },
      // 点击查看委托协议单详情
      handleDetailEntrustReceipt(row) {
        this.operType = 'detail'
        this.currRow = row
        this.showAddEditEntrustReceiptDialog = true
      },
      // 点击查看委托协议书
      handleLookEntrustReceipt(row) {
        listByIds(row.ossId).then(res => {
          window.open(res.data[0].url, 'entrustReceipt')
        }).catch(err => {})
      }
    }
  }
</script>

<style scoped lang="scss">
  .app-container {

    .query-organization-autocomplete {

      ::v-deep .el-autocomplete-suggestion {
        width: auto !important;
      }
    }
  }
</style>
